<template>
  <div class="main-container">

    <aside class="sidebar">
      <div class="logo-container">
        <img src="@/assets/car1.jpg" alt="Logo" @click.prevent="welcomeVisible = true">
        <div class="admin-title">
          <p>系统管理员</p>
        </div>
      </div>
      <nav>
        <ul>
          <li>
            <a href="#" @click.prevent="toggleSubMenu('student')">学员管理</a>
            <div class="sub-menu" v-show="subMenu === 'student'">
              <!-- 将新的子导航相关代码放在这里 -->
              <ul>
                <li @click.prevent="welcomeVisible = false">
                  <router-link :to="{ name : 'StudentInfo'}">
                    信息管理
                  </router-link>
                </li>
                <li @click.prevent="welcomeVisible = false">
                  <router-link :to="{ name : 'StudentProgress'}">
                    进度管理
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#" @click.prevent="toggleSubMenu('coach')">教练管理</a>
            <div class="sub-menu" v-show="subMenu === 'coach'">
              <ul>
                <li @click.prevent="welcomeVisible = false">
                  <router-link :to="{ name: 'CoachInfo'}">
                    信息管理
                  </router-link>
                </li>
                <li @click.prevent="welcomeVisible = false">
                  <router-link :to="{ name : 'CoachPerformance'}">
                    业绩管理
                  </router-link>
                </li>
              </ul>
            </div>
          </li>
          <li @click.prevent="welcomeVisible = false">
            <router-link :to="{ name : 'Car'}">
              车辆管理
            </router-link>
          </li>
          <li @click.prevent="welcomeVisible = false">
            <router-link :to="{ name : 'DriveDetail'}">
              驾校业绩
            </router-link>
          </li>
        </ul>
      </nav>
    </aside>

    <main>
      <header class="header">
        <div class="user-info">
          <div class="user-dropdown" @click="toggleUserOptions">
            <img src="@/assets/man.jpg" alt="User Icon">
            <ul :class="{ 'show-dropdown': dropdownActive }">
              <li><a href="#" @click.prevent="openModal">更改密码</a></li>
              <li><a href="#" @click.prevent="handleLogout">退出</a></li>
            </ul>
          </div>
          <div class="username">{{ loginUsername }}</div>
        </div>
      </header>
      <section class="content">
        <!-- 主页面内容 -->
        <!-- HTML -->
        <div class="admin-home" v-show="welcomeVisible" >
          <h1>欢迎系统管理员</h1>
          <img src="@/assets/drive.jpg" alt="Welcome Image" /> <!-- 替换为实际的图片路径，v-show用于根据欢迎页的可见性显示或隐藏 -->
        </div>
        <router-view v-if="!welcomeVisible"></router-view>
      </section>
    </main>
  </div>
  <!-- 更改密码模态框 -->
  <div class="modal fade" tabindex="-1" role="dialog" id="changePasswordModal" aria-labelledby="changePasswordModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">更改密码</h5>
          <button type="button" class="close" id="closeModalBtn" aria-label="Close" @click="closeModal">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="oldPassword">旧密码</label>
              <input type="password" class="form-control" id="oldPassword" v-model="oldPassword">
            </div>
            <div class="form-group">
              <label for="newPassword">新密码</label>
              <input type="password" class="form-control" id="newPassword" v-model="newPassword">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" @click="changePassword">确定</button>
          <button type="button" class="btn btn-secondary" id="cancelBtn" @click="closeModal">取消</button>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
import './css/Admin.css';
import Admin from './js/Admin.js';
export default Admin;
</script>

<style scoped>

</style>